<template>
	<view class="u-collapse">
		<slot />
	</view>
</template>

<script>
	
	export default {
		name:"u-collapse",
		props: {
			
			accordion: {
				type: Boolean,
				default: true
			},
			
			headStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			bodyStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			itemStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			
			arrow: {
				type: Boolean,
				default: true
			},
			
			arrowColor: {
				type: String,
				default: '#909399'
			},
			
			hoverClass: {
				type: String,
				default: 'u-hover-class'
			}
		},
		created() {
			this.childrens = []
		},
		data() {
			return {

			}
		},
		methods: {
			
			init() {
				this.childrens.forEach((vm, index) => {
					vm.init();
				})
			},
			
			onChange() {
				let activeItem = [];
				this.childrens.forEach((vm, index) => {
					if (vm.isShow) {
						activeItem.push(vm.nameSync);
					}
				})
				
				if (this.accordion) activeItem = activeItem.join('');
				this.$emit('change', activeItem);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
</style>
